<template>
  <div>
    <div class="module_header">
      <img src="@/assets/certificate_bg.png" class="bg" style="width: 100%"/>
      <div class="c" style="display: grid; place-items: center;">
        <div class="logo" >
          <img src="@/assets/logo_min.png" style="width: 100%"/>
        </div>
        <div class="title">全国青少年无人机大赛</div>
      </div>
    </div>
    <div class="cont">
      <div class="title">大赛证书查询</div>
      <div class="item">
        <input placeholder="请输入姓名" v-model.trim="ruleForm.realName"/>
      </div>
      <div class="item">
        <input placeholder="请输入身份证" v-model.trim="ruleForm.idCard"/>
      </div>
      <div class="item">
        <input placeholder="请输入证书编号" v-model.trim="ruleForm.certificate"/>
      </div>
      <div class="item-hint">
        <img
            class="img"
            src="@/assets/common/hint_shen_red.png"
        />大赛证书不作为中小学生招生入学依据
      </div>
      <!--
      <div class="item item_error">
        <input placeholder="请输入证书编号" v-model.trim="ruleForm.certificate"/>
      </div>
      <div class="item-hint">
        <img
          class="img"
          src="@/assets/common/hint_shen_red.png"
        />你输入数据有错 .code-active
      </div>
      -->
      <div class="btn" @click="login" :disabled="btnDisabled">立即查询</div>
    </div>
    <div style="min-height: 10rem"></div>
  </div>
</template>

<script lang="ts"  setup>
import { useRoute, useRouter } from "vue-router";
import {reactive, ref} from "vue";
import {ElMessage, FormInstance} from "element-plus";
import baseService from "@/service/baseService";
import {setCache} from "@/utils/cache";
const bgImg = require('../../assets/bg.png')

const router = useRouter();

const ruleForm = reactive({
  realName: "",
  idCard: "",
  certificate: ""
});

const btnDisabled = ref(false);



/**
 * 登录
 */
const login = async (formEl: FormInstance | undefined) => {
  btnDisabled.value = true;
  // 姓名、身份证、证书编号至少选择2项才能查询
  let count = 0;
  if (ruleForm.realName) {
    count++;
  }
  if (ruleForm.idCard) {
    count++;
  }
  if (ruleForm.certificate) {
    count++;
  }
  if(count < 2) {
    ElMessage.error("姓名、身份证、证书编号至少选择2项才能查询");
    return;
  }
  baseService
      .post("/front/spuser/queryCertificateBy", ruleForm)
      .then((res) => {
            if (res.code === 0) {
              console.log(res.data)
              if(res.data.length === 0) {
                ElMessage.error("未查询到相关证书");
                return;
              }
              const certificate = {
                realName: ruleForm.realName,
                idCard: ruleForm.idCard,
                certificate: ruleForm.certificate
              };
              setCache("certificate", certificate, true);
              if(res.msg === '2'){
                router.push("/wap/certificate_teacher");
              }else{
                router.push("/wap/certificate_student");
              }
            } else {
              ElMessage.error(res.msg);
            }
            btnDisabled.value = false;
          }
      );
};

</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
